<template>
  <div class="buildTask">
    <el-form :rules="rules" ref="taskForm" :model="taskForm" label-width="140px" label-position="right">
      <div class="title">
        <h3>1、任务信息 </h3><span class="completeIcon" v-show="step === 2"></span>
        <el-button class="updateBtn" v-show="step === 2" @click="step = 1">编辑</el-button>
      </div>
      <div class="taskInfo" v-show="step === 1">
        <el-row>
          <el-form-item  label="项目名称" class="form-item-top span12">
            <el-select v-model="taskForm.projectCode" filterable  placeholder="请选择" class="inputWidth">
              <el-option v-for="(item, index) in projectOptions" :label="item.projectName" :value="item.projectCode" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="processName"  label="项目流程" class="form-item-top span12">
            <el-select v-model="taskForm.processName" placeholder="请选择" class="inputWidth">
              <el-option v-for="(item, index) in processOptions" :label="item.label" :value="item.value" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="taskName" label="新增子任务" class="form-item-top span12">
            <el-input v-model="taskForm.taskName" placeholder="请填写子任务名称" class="inputWidth"></el-input>
          </el-form-item>
          <el-form-item prop="effectTime" label="生效时间" class="form-item-top span12">
            <el-date-picker  v-model="taskForm.effectTime"  type="date" @input="dateScopeChange"  placeholder="选择日期" class="inputWidth"></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="24" class="operationBtn">
            <el-button class="cancelBtn" @click="clearForm">取消</el-button>
            <el-button class="nextBtn" @click="next">下一步</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="title">
        <h3>2、扩展信息 </h3><span class="completeIcon"  v-show="false"></span>
        <el-button class="updateBtn" v-show="false">编辑</el-button>
      </div>
      <div class="taskInfo" v-show="step === 2">
        <div class="addFieldBox">
          <el-button icon="plus" class="addFieldBtn" @click="addField">新增字段</el-button>
        </div>
        <el-row  v-for="(field, index) in fields" :key="field.key">
          <el-form-item label="字段名称" class="form-item-top span11" label-width="100px">
            <el-input v-model="field.fieldName" placeholder="请填写字段名称"></el-input>
          </el-form-item>
          <el-form-item label="字段类型" class="form-item-top span11" label-width="100px">
            <el-select v-model="field.fieldType"  placeholder="请选择字段类型">
              <el-option v-for="(item, index2) in feildTypeOptions" :label="item.label" :value="item.value" :key="index2"></el-option>
            </el-select>
          </el-form-item>
          <el-button v-show="index >= 3" icon="minus" class="form-item-top span2 deleteFieldBtn " @click.prevent="removeField(field)">删除</el-button>
        </el-row>
        <el-row>
          <el-col :span="24" class="operationBtn">
            <el-button class="cancelBtn" @click="clearForm">取消</el-button>
            <el-button class="nextBtn" type="primary" @click="submitForm('taskForm')">完成</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>
<script>
  import ajax from '../../../utils/ajax/index'
  import setDate from '../../../utils/date/setDate'
  import clearObj from '../../../utils/clearObj'
  export default {
    data () {
      return {
        step: 1,
        fields: [{
          fieldName: '',
          fieldType: '',
          content: '',
          key: Date.now()
        }, {
          fieldName: '',
          fieldType: '',
          content: '',
          key: Date.now()
        }, {
          fieldName: '',
          fieldType: '',
          content: '',
          key: Date.now()
        }],
        taskForm: {
          projectCode: '',
          processName: '',
          effectTime: '',
          taskName: '',
          extInfo: ''
        },
        rules: {
          projectCode: [
            { required: true, message: '请选择项目', toggle: 'blur' }
          ],
          processName: [
            { required: true, message: '请选择流程', toggle: 'blur' }
          ],
          effectTime: [
            { required: true, message: '请填写生效时间', toggle: 'blur' }
          ],
          taskName: [
            { required: true, message: '请填写任务名称', toggle: 'blur' }
          ]
        },
        projectOptions: [],
        processOptions: [{
          value: '机具采购',
          label: '机具采购'
        }, {
          value: '机具运输',
          label: '机具运输'
        }, {
          value: '机具验收',
          label: '机具验收'
        }, {
          value: '机具安装',
          label: '机具安装'
        }, {
          value: '机具维护',
          label: '机具维护'
        }, {
          value: '机具回收',
          label: '机具回收'
        }],
        feildTypeOptions: [{
          value: '日期',
          label: '日期'
        }, {
          value: '文本',
          label: '文本'
        }]
      }
    },
    mounted () {
      this.getProjectList()
    },
    methods: {
      dateScopeChange (val) {
        this.taskForm.effectTime = setDate(val)
      },
      dateScopeChange2 (val, index) {
        this.fields[index].content = setDate(val)
      },
      addField () {
        this.fields.push({
          fieldName: '',
          fieldType: '',
          content: '',
          key: Date.now()
        })
      },
      removeField (item) {
        var index = this.fields.indexOf(item)
        if (index !== -1) {
          this.fields.splice(index, 1)
        }
      },
      next () {
        this.step = 2
      },
      submitForm (formName) {
        let that = this
        let confirm = that.$confirm
        let msg = that.$message
        let url = that.api.buildTask.add
        // 如果扩展信息没填，就不传给后台
        let newFields = that.fields.filter((item, index) => {
          return item.fieldName !== '' && item.fieldType !== ''
        })
        that.taskForm.extInfo = JSON.stringify(newFields)
        console.log(that.taskForm.extInfo)
        that.$refs[formName].validate((valid) => {
          if (valid) { // 通过验证
            confirm('是否继续?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'})
              .then(() => {
                ajax.post(url, that.taskForm, true).then((res) => {
                  if (res.msg.code === '20000') {
                    console.log(res)
                    let data = res.data
                    that.data = data
                    msg({type: 'success', message: '新建任务成功'})
                    that.$router.push('/cityList')
                  } else {
                    msg({type: 'error', message: res.msg.message})
                  }
                })
              }).catch(() => {})
          } else {
            // 未通过验证
            msg({type: 'error', message: '必填项填写有误！'})
          }
        })
      },
      getProjectList () {
        let that = this
        let url = that.api.buildTask.getProject
        let store = that.$store
        ajax.get(url, {}, store, true).then((res) => {
          let data = res.data
          that.projectOptions = data
        })
      },
      clearForm () {
        clearObj(this.taskForm)
        this.fields = [{
          fieldName: '',
          fieldType: '',
          content: '',
          key: Date.now()
        }, {
          fieldName: '',
          fieldType: '',
          content: '',
          key: Date.now()
        }, {
          fieldName: '',
          fieldType: '',
          content: '',
          key: Date.now()
        }]
      }
    }
  }
</script>
